<template>
    <div class="charge-container">
		<template>
			<el-table :data="vipList" border style="width: 100%">
				<el-table-column align="center" label="产品图片" width="130">
					<!-- 插槽作用域 -->
					<template v-slot="{ row }">
						<el-avatar shape="square" :size="80" fit="scale-down" :src="row.imageUrl"></el-avatar>
					</template>
				</el-table-column>
				<el-table-column prop="productName" align="center" label="产品名称">
				</el-table-column>
				<el-table-column prop="description" align="center" label="产品描述">
				</el-table-column>
				<el-table-column prop="price" align="center" label="价格(元)">
				</el-table-column>
				<el-table-column prop="inventory" align="center" label="库存">
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template v-slot="{ row }">
						<el-button type="primary" @click="pre_order(row)" icon="iconfont icon-vip3">充值</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
    </div>
</template>
    

<script>
	import * as api from "@/api/transaction"
    export default{
		data() {
			return {
				vipList: [],
			};
		},
        meta:{
            title:'vipCharge',
            name:'vip充值',
            icon:'iconfont icon-chongzhi'
        },
		created(){
			this.getVipList()
		},
		methods:{
			pre_order(row){
				//获得当前这一行的product_id 产品id
				console.log(row);
				let product_id = row.product_id
			
				// this.$confirm  提示
				this.$confirm('您正在购买'+row.description+'请确认您已经满18岁,并且具备购买能力, 是否确定购买?', '购买提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type:'success',
				})
				.then(() => {//点了确定
					//跳转到预支付页面
					this.$router.push({path:'/preorder',query:{product_id}})
				}) 
				.catch(() => {//点了取消
					this.$message({
					type: 'error',
					message: '已取消购买'
			
					})
				})
			},
			getVipList(){
				api.getVipListApi()
				.then(res => {
					console.log(res.data);
					this.vipList = res.data.data
				})
			}
		}
    }
</script>

<style scoped lang="less">
	.el-avatar {
		/deep/ img{
			width: 100%;
		}
		height: 30px !important;
		background-color: #fff;
	}

	.el-button--primary {
		background-color: #05a000;
	}
</style>